<script>
import { ref,reactive,onMounted,onBeforeUnmount } from 'vue'
import { useRouter } from 'vue-router'
import { ElMessage } from 'element-plus'
import { User,Grid } from '@element-plus/icons'
import axios from '../config/axios'
import usePointPoem from '../hooks/usePointPoem'
// var baseUrl = 'http://localhost:9999'
export default {
 setup() {
    const router = useRouter();
    let form = ref(null);
    let uname = ref(null);
    let pword = ref(null);
    onMounted(()=>{
        document.body.style.backgroundImage = "url('/imgs/BingWallpaper.jpg')";
        document.body.style.backgroundRepeat = 'repeat';
        document.body.style.backgroundSize = '100%';
        
        //古诗钩子
        usePointPoem();
    })
    onBeforeUnmount(()=>{
        //卸载古诗钩子
        usePointPoem(true);
    })
    let formDt = reactive({
        username:'',
        password:''
    })
    function reset(){
       form.value.resetFields();
    }
    function login(){
        form.value.validate(result=>{
            let {username,password} = formDt

            //TODO:将账号和密码发送的服务器，接收token
            axios.post("/login",{
                username,password
            }).then(res=>{
                if(res.data.result){
                    console.log("登录成功",res);
                    localStorage.setItem('token',res.data.data);
                    ElMessage.success('登录成功')
                    router.push('/index/wordtest');
                }else{
                    console.log("登录失败",res);
                    ElMessage.info(res.data.msg+"");
                }
            }).catch(err=>{
                console.log("登录失败",err);
                ElMessage.info("登录失败")
            })
            
            
        })
        
    }
    return {
        formDt,
        login,
        reset,
        User,Grid,
        form,uname,pword,
        LoginRules:{
            username:[
                {
                    required:true,message:"请输入账号",trigger:"blur"
                }
            ],
            password:[
                {
                    required:true,message:"请输入密码",trigger:"blur"
                }
            ]
        }
    }
 }
}
</script>
<template>
    <div id="login-container">
        <el-form :model="formDt" class="vertical" :rules="LoginRules" ref="form">
            <el-form-item>
                <h1>欢迎登录</h1>
            </el-form-item>
            
            <el-form-item prop="username" >
                <el-input 
                v-model="formDt.username" 
                :prefix-icon="User"  
                placeholder="请输入账号"
                ref="uname"
                @keydown.enter = "pword.focus()"
                ></el-input>
            </el-form-item>

            <el-form-item prop="password" >
                <el-input 
                v-model="formDt.password" 
                :prefix-icon="Grid" 
                placeholder="请输入密码" 
                type="password" 
                show-password 
                ref="pword"
                @keydown.enter = "login"
                ></el-input>
            </el-form-item>
            <el-form-item>
                <el-button type="primary" @click="login">登录</el-button>
                <el-button type="info" @click="reset">重置</el-button>
                
            </el-form-item>
        </el-form>
    </div>
</template>
<style scoped>
    #login-container{
        width: 500px;
        height: 360px;
        /* border: 1px solid black; */
        box-shadow: 6px 6px 6px rgb(90, 77, 77);
        border-radius: 18px;
        margin: auto;
        margin-top: 50vh;
        transform: translateY(-50%);
        background-color: rgba(85, 66, 105, 0.559);
        caret-color: transparent;
    }
    .vertical{
        height: 360px;
        display: flex;
        flex-direction:column;
    }
    .el-form-item{
        flex: 1;
        width: 80%;
        margin: auto;
    }
    .el-input{
        height: 39px;
        border-radius: 10px;
        font-size: 20px;
        caret-color: black;
    }
    h1{
        text-align: center;
        color: wheat;
        display: inline-block;
        margin: auto;
    }
</style>
